<template>
  <div id="SFormTable"
       class="s-form-table">
    <div v-if="fields && fields.length"
         class="form-container"
         style="margin-bottom: 24px">
      <a-form layout="inline"
              style="margin-bottom: -24px">
        <a-form-item v-for="field in fields.filter(item => item.type !== 'hidden')"
                     :key="field.key"
                     v-show="field.collapsable ? showHiddenFormItems : true"
                     style="margin-bottom: 24px">
          <a-tree-select :allowClear="field.clear === undefined ? true : field.clear"
                         dropdownClassName="select-tree"
                         :style="{ width: field.width ? field.width + 'px' : '256px' }"
                         :tree-data="getRegionDataByMaxLevel(field.maxLevel || 4)"
                         size="large"
                         v-bind="field"
                         v-model="form[field.name]"
                         v-if="field.type === 'region'"
                         @change="changeHandler"
                         show-search
                         :filterTreeNode="filterMethod"
                         :dropdown-style="{ maxHeight: '300px', overflow: 'auto' }"></a-tree-select>
          <a-select size="large"
                    show-search
                    :filter-option="filterOption"
                    :style="{ width: field.width ? field.width + 'px' : '256px' }"
                    v-if="field.type === 'customizationSelect'"
                    v-bind="field"
                    :options="reservoirOptions"
                    v-model="form[field.name]"
                    @change="changeHandler" />
          <a-input size="large"
                   @keydown.enter="search"
                   :style="{ width: field.width ? field.width + 'px' : '256px' }"
                   v-if="!field.type || field.type === 'input'"
                   v-bind="field"
                   v-model="form[field.name]"
                   @input="changeHandler"></a-input>
          <a-input-number size="large"
                          @keydown.enter="search"
                          :style="{ width: field.width ? field.width + 'px' : '256px' }"
                          v-if="field.type === 'number'"
                          v-bind="field"
                          v-model="form[field.name]"
                          @change="changeHandler"></a-input-number>
          <a-select size="large"
                    show-search
                    :filter-option="filterOption"
                    :style="{ width: field.width ? field.width + 'px' : '256px' }"
                    v-if="field.type === 'select'"
                    v-bind="field"
                    v-model="form[field.name]"
                    @change="changeHandler" />
          <a-date-picker size="large"
                         :style="{ width: field.width ? field.width + 'px' : '256px' }"
                         v-if="field.type === 'datetime'"
                         @change="changeHandler"
                         :show-time="field.showTime"
                         :disabledDate="field.disabledDate"
                         v-bind="field"
                         :format="field.format ? field.format : YMDintegralPoint(field)"
                         v-model="form[field.name]" />
          <a-month-picker size="large"
                          :style="{ width: field.width ? field.width + 'px' : '256px' }"
                          v-if="field.type === 'month'"
                          @change="changeHandler"
                          format="YYYY年MM月"
                          value-format="YYYY-MM"
                          :show-time="field.showTime"
                          v-bind="field"
                          v-model="form[field.name]" />
          <a-month-picker size="large"
                          :style="{ width: field.width ? field.width + 'px' : '256px' }"
                          v-if="field.type === 'onlyMonth'"
                          @change="changeHandler"
                          format="MM月"
                          value-format="MM"
                          :show-time="field.showTime"
                          v-bind="field"
                          v-model="form[field.name]" />
          <a-range-picker size="large"
                          :style="{ width: field.width ? field.width + 'px' : '256px' }"
                          v-if="field.type === 'range'"
                          :format="field.format ? field.format : YMDintegralPoint(field)"
                          :show-time="field.showTime"
                          @change="changeHandler"
                          v-bind="field"
                          v-model="form[field.name]" />
          <a-date-picker v-model="form[field.name]"
                         v-if="field.type === 'startTenDays'"
                         v-bind="field"
                         size="large"
                         :style="{ width: field.width ? field.width + 'px' : '256px' }"
                         :format="tenDaysFormat(field.name)"
                         @openChange="handleStartOpenChange"
                         @change="changeHandler" />
          <a-date-picker v-model="form[field.name]"
                         v-if="field.type === 'endTenDays'"
                         v-bind="field"
                         :format="tenDaysFormat(field.name)"
                         size="large"
                         :style="{ width: field.width ? field.width + 'px' : '256px' }"
                         :open="tenDaysEndOpen"
                         @openChange="handleEndOpenChange"
                         @change="changeHandler" />
          <a-range-picker v-bind="field"
                          :style="{ width: field.width ? field.width + 'px' : '256px' }"
                          size="large"
                          @change="changeHandler"
                          format="YYYY年MM月"
                          v-if="field.type === 'yearAndMonth'"
                          :mode="yearAndMonthMode"
                          @panelChange="yearAndMonthChange($event, field.name)"
                          v-model="form[field.name]" />
          <a-date-picker size="large"
                         :style="{ width: field.width ? field.width + 'px' : '256px' }"
                         v-if="field.type === 'year'"
                         @change="changeHandler"
                         :show-time="field.showTime"
                         mode="year"
                         :open="datePanelOpenStatus"
                         format="YYYY年"
                         @focus="datePanelOpenStatus = true"
                         @panelChange="handlePanelChange($event, field.name)"
                         v-bind="field"
                         v-model="form[field.name]" />
        </a-form-item>
        <a-form-item style="margin-bottom: 24px"
                     v-if="fields.filter(item => item.collapsable).length">
          <a-button v-show="showHiddenFormItems"
                    @click="showHiddenFormItems = !showHiddenFormItems"
                    size="large"
                    type="dashed"
                    icon="up">
            收起
          </a-button>
          <a-button v-show="!showHiddenFormItems"
                    @click="showHiddenFormItems = !showHiddenFormItems"
                    size="large"
                    type="dashed"
                    icon="down">
            展开
          </a-button>
        </a-form-item>
        <a-form-item style="margin-bottom: 24px">
          <a-button size="large"
                    ghost
                    v-if="search"
                    type="primary"
                    @click="
              pageInfo.currentPage = 1;
              search();
            "
                    icon="search">查询
          </a-button>
          <a-button size="large"
                    ghost
                    v-if="reset"
                    type="primary"
                    style="margin-left: 14px"
                    @click="reset()"
                    icon="redo">重置
          </a-button>
          <slot name="btn"></slot>
        </a-form-item>
      </a-form>
    </div>
    <div style="margin-bottom: 24px"
         v-if="tabs && tabs.length">
      <a-tabs :default-active-key="tabs[0].name"
              @change="tabChange">
        <a-tab-pane v-for="tab in tabs"
                    :key="tab.name"
                    :tab="tab.name"></a-tab-pane>
      </a-tabs>
    </div>
    <div v-if="create || batchDelete || batchUp || batchDown || $slots.actions"
         style="margin-bottom: 24px"
         class="actions-container"
         @click="actionsClick($event)">
      <a-button @click="onCreateButtonClick"
                v-if="create"
                size="large"
                type="primary"
                icon="plus"
                style="margin-right: 24px">新建
      </a-button>
      <a-button batch-button
                action-name="batch-delete"
                @click="onBatchDeleteButtonClick"
                v-if="batchDelete"
                size="large"
                type="primary"
                icon="delete"
                style="margin-right: 24px">批量删除
      </a-button>
      <a-button batch-button
                action-name="batch-up"
                @click="onBatchUpButtonClick"
                v-if="batchUp"
                size="large"
                type="primary"
                icon="arrow-up"
                style="margin-right: 24px">批量上架
      </a-button>
      <a-button batch-button
                action-name="batch-down"
                @click="onBatchDownButtonClick"
                v-if="batchDown"
                size="large"
                type="primary"
                icon="arrow-down"
                style="margin-right: 24px">批量下架
      </a-button>
      <slot name="actions"></slot>
    </div>
    <a-spin :spinning="loading"
            style="flex-grow: 1; padding-bottom: 26px"
            slot="apin">
      <a-icon slot="indicator"
              type="loading"
              style="font-size: 54px"
              spin />
      <slot name="table"
            :data="tableData">
        <STable ref="table"
                :data="tableData"
                v-bind="$attrs"
                :columns="tableColumns"
                class="table-container"
                :border="border === undefined ? true : border"
                @selection-change="selectionChangeHandler"
                @row-click="rowClickHandler"
                @row-dblclick="rowDoubleClickHandler"
                @row-contextmenu="rowContextMenuHandler">
          <slot slot="actions"
                slot-scope="{ row }"
                name="row-actions"
                :row="row" />
          <!-- 根据名称向表格注入自定义 slot -->
          <template v-for="name in externalSlots"
                    :slot="name"
                    slot-scope="item">
            <slot :name="name"
                  :row="item.row"
                  :index="item.$index"
                  :option="item.option" />
          </template>
        </STable>
      </slot>
    </a-spin>
    <div v-if="hasPaging"
         style="display: flex; align-items: center; justify-content: space-between">
      <!-- 批量删除时显示 -->
      <div>
        <template v-if="batchMode">
          <a-button size="large"
                    @click="CancelExit"
                    style="width: 148px; margin-right: 24px"
                    type="primary"
                    ghost
                    icon="close-circle">取消退出
          </a-button>
          <div style="display: inline-block"
               ref="confirmButtonContainer">
            <a-popconfirm title="确认批量删除这些数据吗？"
                          @confirm="onConfirmBatchDeleteButtonClick"
                          v-if="currentBatchConfirmActionName === 'batch-delete'">
              <a-button size="large"
                        style="width: 148px"
                        type="primary"
                        icon="check-circle"
                        action-name="batch-delete">
                确定删除
              </a-button>
            </a-popconfirm>
            <a-popconfirm title="确认批量上架这些数据吗？"
                          @confirm="onConfirmBatchUpButtonClick"
                          v-if="currentBatchConfirmActionName === 'batch-up'">
              <a-button size="large"
                        style="width: 148px"
                        type="primary"
                        icon="check-circle"
                        action-name="batch-up">
                确定上架
              </a-button>
            </a-popconfirm>
            <a-popconfirm title="确认批量下架这些数据吗？"
                          @confirm="onConfirmBatchDownButtonClick"
                          v-if="currentBatchConfirmActionName === 'batch-down'">
              <a-button size="large"
                        style="width: 148px"
                        type="primary"
                        icon="check-circle"
                        action-name="batch-down">
                确定下架
              </a-button>
            </a-popconfirm>
            <slot :selection="selectedData"
                  name="batch-confirm-button"></slot>
          </div>
        </template>
      </div>
      <slot name="pagination">
        <div style="display: flex; align-items: center; height: 40px; z-index: 10">
          <span style="margin-right: 24px">
            {{ pageInfo.total }}项中的{{
              pageInfo.total !== 0
                ? (pageInfo.currentPage - 1) * pageInfo.pageSize + 1
                : 0
            }}-{{
              pageInfo.currentPage * pageInfo.pageSize > pageInfo.total
                ? pageInfo.total
                : pageInfo.currentPage * pageInfo.pageSize
            }}项
          </span>
          <a-pagination @change="search"
                        v-model="pageInfo.currentPage"
                        :total="pageInfo.total"
                        :pageSize="pageInfo.pageSize"
                        show-less-items />
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import STable from "@/components/STable";
import api from "@/util/api";

export default {
  name: "SFormTable",
  components: {
    STable
  },
  props: {
    getUrl: {
      type: String
    },
    getType: {
      type: String,
      default: "get"
    },
    deleteUrl: {
      type: String
    },
    border: {
      type: Boolean,
      default: true
    },
    fields: {
      type: Array,
      default: () => []
    },
    hasPaging: {
      type: Boolean,
      default: true
    },
    columns: {
      type: Array,
      default: () => []
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    getData: {
      type: Function,
      default: null
    },
    transformParams: {
      type: Function,
      default: form => form
    },
    tabs: {
      type: Array,
      default: null
    },
    selection: {
      // 表格多选
      type: Boolean,
      default: false
    },
    createButtonClickHandler: {
      type: Function,
      default: () => { }
    },
    batchDeleteHandler: {
      type: Function,
      default: null
    },
    detailHandler: {
      type: Function,
      default: null
    },
    arraySpanMethod: {
      type: Function,
      default: null
    },
    headerCellClass: {
      type: Function,
      default: null
    },
    cellClass: {
      type: Function,
      default: null
    },
    create: {
      type: Boolean,
      default: false
    },
    batchDelete: {
      // 批量删除
      type: Boolean,
      default: false
    },
    batchUp: {
      // 批量上架
      type: Boolean,
      default: false
    },
    batchDown: {
      // 批量下架
      type: Boolean,
      default: false
    },
    batchUpHandler: {
      type: Function,
      default: null
    },
    batchDownHandler: {
      type: Function,
      default: null
    },
    dblDetail: {
      type: Boolean,
      default: false
    },
    serialNumber: {
      // 表格是否添加序号
      type: Boolean,
      default: false
    }
  },
  computed: {
    externalSlots () {
      const definedSlotNames = ["row-actions", "actions"];
      return Object.keys(this.$scopedSlots).filter(
        name => !~definedSlotNames.indexOf(name)
      );
    },
    tableColumns () {
      const fn = item => {
        const col = {
          ...item
        };

        if (col.children) {
          col.children = col.children.map(fn);
        } else {
          if (!(col.minWidth || col.width)) {
            col.minWidth = 160;
          }
        }

        if (col.scrollFixed) {
          col.align = "center";
        }

        return col;
      };

      let cols = null;

      if (this.tabs) {
        cols = this.currentTab.columns.map(fn);
      } else {
        cols = this.columns.map(fn);
      }

      if (this.batchMode) {
        cols.unshift({ type: "selection" });
      }

      if (this.serialNumber) {
        cols.unshift({
          type: "index",
          index: (this.pageInfo.currentPage - 1) * this.pageInfo.pageSize + 1,
          title: "序号"
        });
      }

      return cols;
    },
    reservoirOptions () {
      if (
        this.fields.filter(
          item =>
            item.type === "customizationSelect" && item.hasAllOption === false
        ).length
      ) {
        return [...this.reservoirList];
      }

      return [{ label: "全部水库", value: "" }, ...this.reservoirList];
    }
  },
  watch: {
    fields: {
      handler () {
        this.onFieldsUpdated();
      },
      deep: true
    },
    value: {
      handler () {
        this.form = {
          ...this.value
        };
      },
      deep: true
    }
  },
  data () {
    return {
      reservoirList: [], //水库列表
      loading: false,
      batchMode: false,
      currentTab: this.tabs ? this.tabs[0] : null,
      showHiddenFormItems: true,
      pageInfo: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      form: {},
      tableData: [],
      yearAndMonthMode: ["month", "month"], // 年月组件的mode
      datePanelOpenStatus: false,
      tenDaysEndOpen: false, // 旬组件结束时间弹窗
      selectedData: [],
      regionTreeData: [],
      currentBatchConfirmActionName: ""
    };
  },
  mounted () {
    // api
    //   .get("/api/" + this.$apiUrl + "-yhjw/county/project", {
    //     params: { mode: "1" }
    //   })
    //   .then(data => {
    //     this.reservoirList = data?.map(item => {
    //       return { label: item.fdName, value: item.projectCd };
    //     });

    //     if (
    //       this.fields.filter(
    //         item =>
    //           item.type === "customizationSelect" && item.hasAllOption === false
    //       ).length &&
    //       this.reservoirList.length
    //     ) {
    //       // 搜索前 表单的值
    //       this.requestForm.resCd = this.reservoirList[0].value;
    //       // 所选表单的值
    //       this.form.resCd = this.reservoirList[0].value;
    //     } else {
    //       // 搜索前 表单的值
    //       this.requestForm.resCd = null;
    //       // 所选表单的值
    //       this.form.resCd = "";
    //     }
    //   });
    this.reset(true);
  },
  methods: {
    onFieldsUpdated () {
      const form = { ...this.form };

      this.fields.forEach(field => {
        if (!Object.prototype.hasOwnProperty.call(form, field.name)) {
          form[field.name] = field.defaultValue;
        } else {
          form[field.name] =
            field.value === undefined ? form[field.name] : field.value;
        }
      });
      this.form = form;
      this.changeHandler();
    },
    CancelExit () {
      this.$emit("CancelExit");
      this.batchMode = false;
    },
    defaultAdcd () {
      return this.$defaultAdcd;
    },
    actionsClick (event) {
      const target = event.target;
      const isBatchButton = target.getAttribute("batch-button") === "";
      const actionName = target.getAttribute("action-name");

      if (isBatchButton) {
        this.currentBatchConfirmActionName = actionName;
        this.$refs.table.clearSelection();
        this.batchMode = true;
        this.$nextTick(() => {
          Array.from(
            this.$refs.confirmButtonContainer.querySelectorAll(`[action-name]`)
          ).forEach(node => {
            node.style.display = "none";
          });

          Array.from(
            this.$refs.confirmButtonContainer.querySelectorAll(
              `[action-name='${actionName}']`
            )
          ).forEach(node => {
            node.style.display = "inline-block";
          });
        });
      } else {
        this.batchMode = false;
        this.currentBatchConfirmActionName = "";
      }
    },
    YMDintegralPoint (field) {
      if (field.integralPoint && field.showTime) {
        return "YYYY年MM月DD日 HH:00:00";
      } else if (field.showTime) {
        return "YYYY年MM月DD日 HH:mm:ss";
      }
      return "YYYY年MM月DD日";
    },
    tenDaysFormat (key) {
      const days = Number(moment(this.form[key]).format("DD"));
      if (days >= 21) {
        return "YYYY-MM-下旬";
      }
      if (days >= 11) {
        return "YYYY-MM-中旬";
      }
      return "YYYY-MM-上旬";
    },
    getRegionDataByMaxLevel (maxLevel) {
      const parseNode = (node, level) => {
        const buf = {
          ...node,
          isLeaf: level === maxLevel ? true : node.isLeaf
        };

        if (node.level !== maxLevel) {
          buf.children =
            buf.children &&
            buf.children.map(item => parseNode(item, level + 1));
        }

        return buf;
      };

      return this.regionTreeData.map(item => parseNode(item, 1));
    },
    getFilterRegionTreeData (list) {
      let resultList = [];
      const callFun = _list => {
        for (const item of _list) {
          // console.log(item.value)
          if (item.value === this.defaultAdcd()) {
            resultList = [item];
            break;
          }
          if (item.children) {
            callFun(item.children);
          }
        }
      };
      callFun(list);
      return resultList;
    },
    onCreateButtonClick () {
      this.createButtonClickHandler();
    },
    onBatchDeleteButtonClick () {
      this.batchMode = true;
      this.selectedData = [];
      this.$emit("onBatchDeleteButtonClick");
    },
    onBatchUpButtonClick() {
      this.batchMode = true;
      this.selectedData = [];
      this.$emit("onBatchUpButtonClick");
    },
    onBatchDownButtonClick() {
      this.batchMode = true;
      this.selectedData = [];
      this.$emit("onBatchDownButtonClick");
    },
    onConfirmBatchDeleteButtonClick () {
      if (!this.selectedData.length) {
        this.$message.warning("请先选择需要删除的数据！");
        return;
      }

      if (this.batchDeleteHandler) {
        this.batchDeleteHandler(this.selectedData);
      } else {
        this.$message.success("批量删除成功！");
        this.search();
      }
    },
    onConfirmBatchUpButtonClick() {
      if (!this.selectedData.length) {
        this.$message.warning("请先选择需要上架的数据！");
        return;
      }

      if (this.batchUpHandler) {
        this.batchUpHandler(this.selectedData);
      }
    },
    onConfirmBatchDownButtonClick() {
      if (!this.selectedData.length) {
        this.$message.warning("请先选择需要下架的数据！");
        return;
      }

      if (this.batchDownHandler) {
        this.batchDownHandler(this.selectedData);
      }
    },
    handleStartOpenChange (open) {
      if (!open) {
        this.tenDaysEndOpen = true;
      }
    },
    handleEndOpenChange (open) {
      this.tenDaysEndOpen = open;
    },
    selectionChangeHandler (selection) {
      this.selectedData = selection;
      this.$emit("select-done", selection);
    },
    rowClickHandler (...args) {
      this.$emit("row-click", ...args);
    },
    rowDoubleClickHandler (...args) {
      if (this.dblDetail) {
        if (this.detailHandler) {
          this.detailHandler(...args);
        } else {
          // TODO: 实现默认详情
        }
      }

      this.$emit("row-dblclick", ...args);
    },
    rowContextMenuHandler (...args) {
      this.$emit("row-contextmenu", ...args);
    },
    tabChange (key) {
      this.currentTab = this.tabs.filter(tab => tab.name === key)[0];
      this.search();
    },
    search () {
      clearTimeout(this.searchTimer);

      this.searchTimer = setTimeout(() => {
        // 保证查询在 watch 执行之后
        this.$nextTick(() => {
          this.$emit("before-get", this.requestForm);

          this.loading = true;
          let getData = form => {
            if (this.getType === "get") {
              return api.get(this.getUrl, { params: form }).then(response => {
                this.$emit("after-get", response);

                const { total, records } = response;
                return {
                  page: {
                    total
                  },
                  data: records
                };
              });
            }
            return api.post(this.getUrl, form).then(response => {
              this.$emit("after-get", response);

              const { total, records } = response;
              return {
                page: {
                  total
                },
                data: records
              };
            });
          };

          if (this.getData) {
            getData = this.getData;
          }
          const form = this.transformParams(
            {
              page: this.pageInfo.currentPage,
              pageSize: this.pageInfo.pageSize,
              ...this.requestForm
            },
            "GET_DATA"
          );
          let req = getData(form);
          req.then(({ page, data }) => {
            this.pageInfo.total = page.total;
            this.tableData = data;
          })
          .finally(() => {
            this.loading = false;
          });
        });
      }, 300);
    },
    handlePanelChange (value, key) {
      this.$set(this.form, key, moment(value));
      this.datePanelOpenStatus = false;
      this.changeHandler();
    },
    yearAndMonthChange (value, key) {
      this.$set(this.form, key, value);
      this.yearAndMonthMode = ["month", "month"];
      this.changeHandler();
    },
    reset (initMode) {
      const obj = { ...this.form };

      this.fields.forEach(item => {
        let value = item.defaultValue;

        if (initMode) {
          // 判定是否存在 value 属性，如果存在在初始化模式下采用该值，否则使用 defaultValue
          value = Object.prototype.hasOwnProperty.call(item, "value")
            ? item.value
            : item.defaultValue;
        }

        if (
          ~["datetime", "time", "year", "month", "onlyMonth"].indexOf(
            item.type
          ) &&
          value
        ) {
          value = moment(value);
        }

        if (item.type === "region") {
          value = value || this.defaultAdcd();
        }

        if (
          item.type === "customizationSelect" &&
          item.hasAllOption === false &&
          this.reservoirList.length
        ) {
          value = this.reservoirList[0].value;
        }

        obj[item.name] = value;
      });

      this.$set(this, "form", obj);
      this.$emit("reset");
      this.changeHandler();
      this.search();
    },
    // 表格多选框被选中
    handleSelectionChange (val) {
      this.$emit("handleSelectionChange", val);
    },
    // 行被单机
    rowClick (row) {
      this.$emit("rowClick", row);
    },
    // 表格详情
    handleDetail (val) {
      this.$emit("handleDetail", val);
    },
    changeHandler () {
      const data = {
        ...this.form
      };
      this.fields.forEach(field => {
        if (field.type === "datetime") {
          data[field.name] = data[field.name]
            ? moment(data[field.name]).format(
              field.format ||
              (field.showTime ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD")
            )
            : data[field.name];
        } else if (field.type === "date") {
          data[field.name] = data[field.name]
            ? moment(data[field.name]).format(field.format || "YYYY-MM-DD")
            : data[field.name];
        } else if (field.type === "month") {
          data[field.name] = data[field.name]
            ? moment(data[field.name]).format(field.format || "YYYY-MM")
            : data[field.name];
        } else if (field.type === "onlyMonth") {
          data[field.name] = data[field.name]
            ? moment(data[field.name]).format(field.format || "MM")
            : data[field.name];
        } else if (field.type === "year") {
          data[field.name] = data[field.name]
            ? moment(data[field.name]).format(field.format || "YYYY")
            : data[field.name];
        }
      });

      this.requestForm = data;

      this.$emit("input", data);
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
    filterMethod (str, node) {
      return ~(node.data.props.title || "").indexOf(str);
    }
  }
};
</script>

<style lang="less" scoped>
.s-form-table {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
}

.table-container {
  flex-grow: 1;
}

::v-deep .ant-tabs-bar {
  margin: 0;
}

::v-deep .is-center.scroll-fixed {
  text-align: left;
  height: 40px;
}

::v-deep .cell.scroll-fixed {
  display: inline-block;
  width: auto;
  transition: margin-left 10ms;
  position: fixed;
  transform: translateY(-10px) translateX(-50%);
}
</style>

<style>
.select-tree {
  max-height: 300px !important;
}
</style>
